<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度地图公交线路</title>
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapData/js/echarts/echarts.js"></script>
    <script src="../../js/extension/bmap.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
</head>
<body>
<div id="map-wrap" style="height: 770px;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    $(function()
    {
        lines_bus();//添加覆盖物
    });
    var styleJson = [
        {
            'featureType': 'land',     //调整土地颜色
            'elementType': 'geometry',
            'stylers': {
                'color': '#081734'
            }
        },
        {
            'featureType': 'building',   //调整建筑物颜色
            'elementType': 'geometry',
            'stylers': {
                'color': '#04406F'
            }
        },
        {
            'featureType': 'building',   //调整建筑物标签是否可视
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'highway',     //调整高速道路颜色
            'elementType': 'geometry',
            'stylers': {
                'color': '#015B99'
            }
        },
        {
            'featureType': 'highway',    //调整高速名字是否可视
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'arterial',   //调整一些干道颜色
            'elementType': 'geometry',
            'stylers': {
                'color':'#003051'
            }
        },
        {
            'featureType': 'arterial',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'green',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'water',
            'elementType': 'geometry',
            'stylers': {
                'color': '#044161'
            }
        },
        {
            'featureType': 'subway',    //调整地铁颜色
            'elementType': 'geometry.stroke',
            'stylers': {
                'color': '#003051'
            }
        },
        {
            'featureType': 'subway',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'railway',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'railway',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'all',     //调整所有的标签的边缘颜色
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#313131'
            }
        },
        {
            'featureType': 'all',     //调整所有标签的填充颜色
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#FFFFFF'
            }
        },
        {
            'featureType': 'manmade',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'manmade',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'local',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'local',
            'elementType': 'labels',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'subway',
            'elementType': 'geometry',
            'stylers': {
                'lightness': -65
            }
        },
        {
            'featureType': 'railway',
            'elementType': 'all',
            'stylers': {
                'lightness': -40
            }
        },
        {
            'featureType': 'boundary',
            'elementType': 'geometry',
            'stylers': {
                'color': '#8b8787',
                'weight': '1',
                'lightness': -29
            }
        }];
    function lines_bus()
    {
        // 初始化echarts对象
        var mapChart = echarts.init(document.getElementById('map-wrap'));

        // 读取lines-bus线路json数据
        $.get('../../mapData/json/lines-bus.json', function(data)
        {
            var hStep = 300 / (data.length - 1);
            var busLines = [].concat.apply([], data.map(function (busLine, idx)
            {
                var prevPt;
                var points = [];
                for (var i = 0; i < busLine.length; i += 2)
                {
                    var pt = [busLine[i], busLine[i + 1]];
                    if (i > 0)
                    {
                        pt = [
                            prevPt[0] + pt[0],
                            prevPt[1] + pt[1]
                        ];
                    }
                    prevPt = pt;

                    points.push([pt[0] / 1e4, pt[1] / 1e4]);
                }
                return {
                    coords: points,
                    lineStyle: {
                        normal: {
                            color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                        }
                    }
                };
            }));
            // 设置图标数据
            var option = {
                backgroundColor: '#404a59', // 图表背景色
                title : {
                    text: '北京市公交线路特效',
                    subtext:'',
                    x:'center',
                    textStyle : {
                        color: '#fff'
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name + ' : ' + params.value[2];
                    }
                },
                legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x:'right',
                    data:['PM2.5'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                toolbox: {
                    show : true,
                    orient : 'vertical',
                    x: 'right',
                    y: 'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                visualMap: {
                    min: 0,
                    max: 200,
                    calculable: true,
                    text: ['高','低'],
                    inRange: {
                        color: ['#50a3ba', '#eac736', '#d94e5d']
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                bmap : {
                    center : [116.46, 39.92],
                    zoom : 10,
                    roam : true,// 允许拖放
                    mapStyle : {// 百度地图样式自定义
                        styleJson : styleJson
                    }
                },
                series: [{
                    type: 'lines',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: busLines,
                    silent: true,
                    lineStyle: {
                        normal: {
                            // color: '#c23531',
                            // color: 'rgb(200, 35, 45)',
                            opacity: 0.2,
                            width: 1
                        }
                    },
                    progressiveThreshold: 500,
                    progressive: 200
                },
                    {
                        type: 'lines',
                        coordinateSystem: 'bmap',
                        polyline: true,
                        data: busLines,
                        lineStyle: {
                            normal: {
                                width: 0
                            }
                        },
                        effect: {
                            constantSpeed: 20,
                            show: true,
                            trailLength: 0.1,
                            symbolSize: 1.5
                        },
                        zlevel: 1
                    }]
            }
            mapChart.setOption(option);

            //引入百度地图底图
            var bmap = mapChart.getModel().getComponent('bmap').getBMap();
            //设置导航条
            bmap.addControl(new BMap.NavigationControl());
            //设置比例尺
            bmap.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
            //设置全图展示区
            bmap.addControl(new BMap.OverviewMapControl());
            //设置地图类型
            bmap.addControl(new BMap.MapTypeControl());
        });
    }
</script>
</html>